<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>纯css实现div容器内图片上下左右居中效果-柯乐义</title> 
        <style type="text/css"> 
            *{ margin:0; padding:0; list-style:none;} 
            img{ border:none;} 
            .main{ width:600px; 
                  height:400px; margin:100px auto;text-align:center;vertical-align:middle;display:block;position:relative; background:#ddd;} 
            .main a{display:table-cell;vertical-align:middle;width:600px; height:400px; } 
            .main a img{max-width:600px;max-height:400px; } 
        </style> 
    </head> 
    <body> 
        <div class="main"> 
            <a href="http://keleyi.com/a/bjac/wynnj5xc.htm" target="_blank"><img src="http://keleyi.com/keleyi/phtml/picnext/images/k06.jpg" alt="柯乐义" /></a> 
        </div> 
    </body> 
</html> 